<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS正则表达式</title>
</head>
<body>
    <script type="text/javascript">
        // 1. 什么是正则表达式? 有什么用?
        //    正则表达式: Regular Expression
        //    正则表达式主要用在字符串匹配方面, 包括搜索方面

        // 2. 正则表达式实际上是一门独立的学科, Java 里支持, c语言支持, c++也支持

        // 3. 常见的正则表达式符号有哪些?
        //          . 匹配除换行符以外的任意字符
		// 			\w 匹配字母或数字或下划线或汉字
		// 			\s 匹配任意的空白符
		// 			\d 匹配数字
		// 			\b 匹配单词的开始或结束
        //          ^ 匹配字符串的开始
        //          $ 匹配字符串的结束
        //
        //          * 重复零次或更多次
        //          + 重复一次或更多次
        //          ? 重复零次或一次
        //          {n} 重复n次
        //          {n,} 重复n次或更多次
        //          {n,m} 重复n到m次
		//
		// 			\W 匹配任意不是字母，数字，下划线，汉字的字符
		// 			\S 匹配任意不是空白符的字符
		// 			\D 匹配任意非数字的字符
		// 			\B 匹配不是单词开头或结束的位置
        //          [^x] 匹配除了x以外的任意字符
        //          [^aeiou] 匹配除了aeiou这几个字母以外的任意字符
        //
        //          正则表达式当中的小括号()优先级较高。
		// 			[1-9] 表示1到9的任意1个数字（次数是1次。）
		// 			[A-Za-z0-9] 表示A-Z, a-z, 0-9中的任意1个字符
        //          [A-Za-z0-9-] 表示A-Z, a-z, 0-9, -(减号) ，以上所有字符中的任意1个字符。
        //
        //
        //          | 表示或者

        // 4. 简单的正则表达式要会写
        //          QQ号的正则表达式：^[1-9][0-9]{4,}$
        //
        // 5. 他人编写的正则表达式要能看懂？
		// 			email正则：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

        // 6. JS 中创建正则表达式
        //          第一种方式:
        //              var regExp = /字符串/flags;
        //          第二种方式: 使用内置的支持类 RegExp
        //              var regExp = new RegExp("字符串", "flags");
        //          关于flags的取值: 为g(全局匹配), i(忽略大小写), m(多行搜索) 这三个字面中的一个或者多个
        //                          如果 flags 中有 m ,则这个字符串必须是普通字符串

        // 7. 正则表达式的方法
        //          test()方法
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                var email = document.getElementById("email").value;
                var emailRexExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                var ok = emailRexExp.test(email);
                if (ok) {
                    document.getElementById("emailError").innerText = "邮箱地址合法";
                }else {
                    document.getElementById("emailError").innerText = "邮箱地址不合法";
                }
            }
            // 当光标回去的时候应该不显示错误信息
            // 给文本框绑定 focus
            document.getElementById("email").onblur = function () {
                document.getElementById("emailError").innerHTML = "";
            }
        }
    </script>

    <input type="text" id="email"/>
    <span id="emailError" style="color: red; font-size: 12px;"></span>
    <br/>
    <input type="button" value="验证邮箱" id="btn"/>
    <br/>

    <script type="text/javascript">
        // 重写 String 的 trim 方法
        String.prototype.trim = function () {
            alert("这是重写后的 trim 方法")
            return this.replace(/^\s+/, "").replace(/\s+$/, "");
        }

        window.onload = function () {
            document.getElementById("btn1").onclick = function () {
                var str = document.getElementById("text").value;
                alert("-" + str.trim() + "-");
            }
        }
    </script>
<!--    正则表达式是自己实现 trim 方法-->
    <input type="text" id="text"/>
    <br/>
    <input type="button" value="点我去掉前后空格" id="btn1"/>
</body>
</html>